<!--
* @Description: 异常特征样本
* @Author: tqh
* @Date: 2022-08-31 17:00
-->

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, unref, nextTick } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { downLoadFile, deepCopy } from '../../../utils/utils';
import { usePermissions } from '../../../composables/usePermissions';
import { useRoute, useRouter } from 'vue-router';
import {
  getList,
  confirmSingle,
  confirmBatch,
  queryPorts,
  delOne,
  delAll,
  getRemoteScan,
} from '../../../api/collection/assetsFound/propertyAudit';
import { getDeptData } from '../../../api/digitalAssets/networkAssets/hostAssets';
import { detectMode } from '../../../api/collection/assetsFound/detectTask';
import { getLeftTreeJson } from '../../../api/permission/userManagement';
import { getDictTypeList, getDeptList } from '../../../api/common';
import { isArray } from '@vue/shared';
const router = useRouter();
const { permissionsButtons } = usePermissions();
const bottomData = new Map();
const rightButtons = ref([]);
const leftButtons = ref([]);
const statusList = ref([
  {
    label: '存活',
    value: 'survive',
  },
  {
    label: '离线',
    value: 'offLine',
  },
  {
    label: '异常',
    value: 'abnormal',
  },
]);
const sourceTypeList = ref([
  {
    label: '远程扫描-任务名称',
    value: 1,
  },
  {
    label: 'Agent采集',
    value: 2,
  },
  {
    label: '被动监测',
    value: 3,
  },
]);
const gatherTypeList = ref([
  {
    label: '远程扫描',
    value: 1,
  },
  {
    label: '登录采集',
    value: 2,
  },
  {
    label: 'Agent采集',
    value: 3,
  },
]);
const switchList = ref([
  {
    label: '开',
    value: 1,
  },
  {
    label: '关',
    value: 2,
  },
]);
const portList = ref([
  {
    label: '全量端口',
    value: 1,
  },
  {
    label: '自定义端口',
    value: 2,
  },
]);

const getButton = () => {
  if (bottomData.has(400132)) {
    leftButtons.value.push({
      eventName: 'delete'
    });
  }
  if (bottomData.has(400133)) {
    leftButtons.value.push({
      text: '批量' + bottomData.get(400133).label,
      plain: true,
      eventName: 'put',
    });
  }
};
//获取所属部门下拉框数据
const getDepteEvent = () => {
  getDeptData().then((res) => {
    const { data = {} } = res;
    data?.forEach((item) => {
      let obj = ref({});
      obj.value.label = item.deptName;
      obj.value.value = item.id;
      deptIdArr.value.push(obj.value);
    });
  });
};
onMounted(() => {
  btnPower();
  getButton();
  init();
  getDictList();
  getDepteEvent();
});
/**
 * 按钮权限
 */
const btnPower = () => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
};
// 分页参数
const page = ref(1);
const total = ref(0);
const size = ref(20);

/**
 * @description: 初始化方法
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const init = () => {
  getLeftButtons();

  // getdDept()
  // getSourceType()
};

/**
 * @description: 获取按钮
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const buttons = ref([]) as any;
//所属部门
const deptIdArr = ref([]);
const getLeftButtons = () => {
  buttons.value = [
    {
      text: '批量删除',
    },
    {
      text: '批量入库',
    },
  ];
};
const queryFormData = reactive({
  column: '',
  asc: null,
});

// 表格数据
const tableData = ref([]) as any;
const tableColumn: any[] = reactive([
  {
    type: 'selection',
    width: '65px',
  },
  {
    prop: 'ip',
    type: 'input',
    label: '资产IP',
    search: true,
    tableHide: true,
  },
  {
    prop: 'showIp',
    label: '资产IP',
    minWidth: '180px',
    sortable: 'custom',
  },
  {
    prop: 'networkAreaCode',
    type: 'select',
    label: '网络域',
    col: 6,
    multiple: true,
    clearable: true,
    collapseTags: true,
    options: [],
    search: true,
    tableHide: true,
  },
  {
    prop: 'networkAreaName',
    label: '网络域',
    minWidth: '180px',
  },
  {
    label: '开放端口数',
    slotName: 'port',
    minWidth: '200px',
  },
  {
    prop: 'assetStatus',
    type: 'select',
    label: '资产状态',
    col: 6,
    multiple: true,
    clearable: true,
    collapseTags: true,
    options: [],
    search: true,
    slotName: 'assetStatus',
    minWidth: '200px',
  },
  {
    slotName: 'sourceType',
    label: '资产来源',
    minWidth: '180px',
  },
  {
    prop: 'deptName',
    label: '所属部门',
    minWidth: '180px',
  },
  {
    prop: 'gmtCreate',
    label: '发现时间',
    minWidth: '200px',
  },
  {
    prop: 'dept',
    type: 'select',
    multiple: true,
    label: '所属部门',
    options: deptIdArr,
    collapseTags: true,
    clearable: true,
    search: true,
    tableHide: true,
  },
  {
    prop: 'time',
    type: 'daterange',
    label: '发现时间',
    col: 6,
    valueFormat: 'YYYY-MM-DD',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    search: true,
    tableHide: true,
  },
  {
    label: '操作',
    fixed: 'right',
    width: '100px',
    buttons: [
      {
        title: '入库',
        disabled: function (row) {
          if (bottomData.has(400133)) {
            return false;
          } else {
            return true;
          }
        },
        eventName: 'putStore',
      },
      {
        title: '删除',
        eventName: 'delete',
        disabled: function (row) {
          if (bottomData.has(400132)) {
            return false;
          } else {
            return true;
          }
        },
      },
    ]
  },
]);
/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]);
const handleSelect = (data) => {
  selectData.value = data;
};
/**
 * @description: 获取表格数据
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const getTableData = async (type) => {
  let _data = JSON.parse(JSON.stringify(type))._value;
  if(_data && _data.time) {
    let begin = _data.time[0] + " 00:00:00";
    let End = _data.time[1] + " 23:59:59";
    _data.createTimeStart = begin;
    _data.createTimeEnd = End;
    delete _data.time
  }
  try {
    const params = {
      ..._data,
      ...queryFormData
    };
    const res = await getList(params);
    if (res.code !== 200) return;
    tableData.value = res.data.records;
    total.value = res.data.total;
  } catch (error) {
    console.log(error);
  }
};
// 排序事件
const handleSortChange = (data) => {
  queryFormData.column = 'ip';
  queryFormData.asc = data.asc;
  multipleTableRef.value.initData();
};
const tableBtnClick = (btn, row) => {
  const { eventName } = btn;
  switch (eventName) {
    case 'put':
      autoBtn('somePut', row);
      break;
    case 'putStore':
      autoBtn('onePut', row)
      break;
  }
};
/**
 * @description：初始化入库数据
 */
const resetFormData = () => {
  formData.name = '';
  // formData.deptId = [];
  formData.gatherTypeSet = ['remote'];
  formData.gatherConfig = {
    remoteScan: {
      // 远程扫描
      detectScanConfig: {
        tcpPortScanRange: 'standard',
        tcpPortScanType: 1,
        tcpScanPort: '1-100,443,445',
        udpScanEnable: false,
        udpScanPort: '25,53',
      },
      detectSurviveConfig: {
        icmpPing: true,
        tcpPing: true,
        tcpPingAllPort: false,
        tcpPort: '21,22,23,25,80,443,445,139,3389,6000',
        udpPing: false,
        udpPort: '25,53',
      },
      modeConfig: {
        mode: 0,
        interval: 0,
        rate: 100,
        retry: 100,
        timeout: 3,
      },
    },
    loginGather: {
      account: '', // 登录账户
      pwd: '', //登录密码
      protocol: null, // 登录协议
      port: null, //登录端口
    },
  };
};
const isAllStore = ref(false);
const codeList = ref([]);
/**
 * @description: 新增/编辑提交
 * @param {'allDel': '批量删除', 'onePut': '单个入库', 'del': '删除', 'somePut': '批量入库'}
 */
const autoBtn = (e, row) => {
  switch (e) {
    case 'onePut':
      isAllStore.value = true;
      nextTick(() => {
        drawerProps.title = '入库';
        console.log(row);
        formData.showIp = row.showIp;
        formData.networkAreaName = row.networkAreaName;
        formData.code = row.assetCode;
        formData.deptId = row.deptId;
        disabledMode.value = true;
        resetFormData();
        getScanModeInfo();
      });
      break;
    case 'allDel':
      let ids = selectData.value.map((item) => {
        return item.assetCode;
      });
      handleDel(ids, 'some');
      break;
    case 'del':
      console.log(row);
      handleDel(row.assetCode, 'one');
      break;
    case 'somePut':
      isAllStore.value = false;
      if (selectData.value.length == 0)
        return ElMessage.warning('请选择要入库的数据');
      codeList.value = selectData.value.map((item) => {
        return item.assetCode;
      });
      let isDeptId = Array.from(selectData.value).every((item) => {
        return item.deptId;
      });
      if (!isDeptId) {
        someformData.value = {};
        drawerProps.showDrawer = true;
      } else {
        putStorage();
      }

      break;
  }
};
/**
 * @description 批量入库
 */
const isSubmitLoading = ref(false);
const putStorage = () => {
  isSubmitLoading.value = true;
  confirmBatch({
    codeList: codeList.value,
    deptId: someformData.value.deptId,
  })
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success('入库成功');
        multipleTableRef.value.initData();
        if (!isAllStore.value) {
          drawerProps.showDrawer = false;
        }
      }
    })
    .finally(() => {
      isSubmitLoading.value = false;
    });
};
const formData = reactive({
  name: '',
  gatherTypeSet: ['login'],
  gatherConfig: {
    remoteScan: {
      // 远程扫描
      detectScanConfig: {
        tcpPortScanRange: 'standard',
        tcpPortScanType: 1,
        tcpScanPort: '1-100,443,445',
        udpScanEnable: false,
        udpScanPort: '25,53',
      },
      detectSurviveConfig: {
        icmpPing: true,
        tcpPing: true,
        tcpPingAllPort: false,
        tcpPort: '21,22,23,25,80,443,445,139,3389,6000',
        udpPing: false,
        udpPort: '25,53',
      },
      modeConfig: {
        mode: 0,
        interval: 0,
        rate: 100,
        retry: 100,
        timeout: 3,
      },
    },
    loginGather: {
      account: '', // 登录账户
      pwd: '', //登录密码
      protocol: null, // 登录协议
      port: null, //登录端口
    },
    gatherStatus: '',
  },
});
//发包速率的校验
var checkRate = (rule, value, callback) => {
  console.log(value);
  if (value < 500) {
    callback(new Error('范围在500-200000'));
  } else if (value > 200000) {
    callback(new Error('范围在500-200000'));
  } else {
    callback();
  }
};
//重试次数的校验
var checkRetry = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error('范围在0-8'));
  } else if (value > 8) {
    callback(new Error('范围在0-8'));
  } else {
    callback();
  }
};
//间隔时间的校验
var checkInterval = (rule, value, callback) => {
  if (value < 100) {
    callback(new Error('范围在100-1000'));
  } else if (value > 1000) {
    callback(new Error('范围在100-1000'));
  } else {
    callback();
  }
};
//超时时间的校验
var checkTimeout = (rule, value, callback) => {
  if (value < 1) {
    callback(new Error('范围在1-30'));
  } else if (value > 30) {
    callback(new Error('范围在1-30'));
  } else {
    callback();
  }
};
const rules = reactive<FormRules>({
  deptId: [{ required: true, message: '请选择归属部门', trigger: 'change' }],
  gatherTypeSet: [
    { required: true, message: '请选择采集方式', trigger: 'change' },
  ],
  'gatherConfig.loginGather.protocol': [
    { required: true, message: '请选择登录协议', trigger: 'change' },
  ],
  'gatherConfig.loginGather.port': [
    { required: true, message: '请输入登录端口', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (/^(?:[0-9]\d*)$/.test(value) == false) {
          callback(new Error('请输入正整数'));
        } else if (value < 1) {
          callback(new Error('范围在1-65535'));
        } else if (value > 65535) {
          callback(new Error('范围在1-65535'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    },
  ],
  'gatherConfig.loginGather.account': [
    { required: true, message: '请输入登录账号', trigger: 'change' },
    { min: 1, message: '登录账号至少1位' },
    { max: 16, message: '登录账号最多20位' },
  ],
  'gatherConfig.loginGather.pwd': [
    { required: true, message: '请输入登录密码', trigger: 'change' },
  ],

  'gatherConfig.remoteScan.modeConfig.rate': [
    { required: true, message: '发包速率不能为空', trigger: 'change' },
    { validator: checkRate, trigger: 'change' },
  ],
  'gatherConfig.remoteScan.modeConfig.retry': [
    { required: true, message: '重试次数不能为空', trigger: 'change' },
    { validator: checkRetry, trigger: 'change' },
  ],
  'gatherConfig.remoteScan.modeConfig.interval': [
    { required: true, message: '间隔时间不能为空', trigger: 'change' },
    { validator: checkInterval, trigger: 'change' },
  ],
  'gatherConfig.remoteScan.modeConfig.timeout': [
    { required: true, message: '超时时间不能为空', trigger: 'change' },
    { validator: checkTimeout, trigger: 'change' },
  ],
});
const drawerProps = reactive({
  showDrawer: false,
  title: '入库',
  size: 'small',
});
const drawerPropsPort = reactive({
  showDrawer: false,
  title: 'IP信息',
  size: 'small',
  total: 0
});
const dialogForm = ref<FormInstance>();
const somedialogForm = ref();

const handleDrawerEvent = (data) => {
  const { eventName = '' } = data;
  // 抽屉点击确定按钮
  console.log(eventName);
  if (eventName === 'success') {
    if (isAllStore.value) {
      handleConfirm(dialogForm.value);
    } else {
      somehandleConfirm(somedialogForm.value);
    }
  } else if (data.eventName == 'successSubmit') {
    putStorage();
  }
};
const somehandleConfirm = () => {
  somedialogForm.value.submitForm(somedialogForm.value.ruleFormRef);
};
const handleConfirm = async (formEl: FormInstance | undefined, obj) => {
  console.log(formEl);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      isSubmitLoading.value = true;
      let params = JSON.parse(JSON.stringify(formData));
      if (params.gatherTypeSet.length == 0) {
        params.gatherConfig = {
          loginGather: {
            account: '',
            port: '',
            protocol: '',
            pwd: '',
          },
        };
      }
      params.deptId = isArray(params.deptId)
        ? params.deptId.join()
        : params.deptId;
      delete params.networkAreaName;
      delete params.showIp;
      confirmSingle(params)
        .then((res) => {
          if (res.code == 200) {
            drawerProps.showDrawer = false;
            ElMessage.success('入库成功！');
            multipleTableRef.value.initData();
          }
        })
        .finally(() => {
          isSubmitLoading.value = false;
        });
    } else {
      console.log('error submit!', fields);
    }
  });
};
const handleCloseDrawer = async (done) => {
  done();
};
const handleDel = async (id, type) => {
  if (type == 'one') {
    delOne({
      code: id,
    }).then((res) => {
      if (res.code == 200) {
        ElMessage.success('删除成功');
        multipleTableRef.value.initData();
      }
    });
  } else {
    delAll(id).then((res) => {
      if (res.code == 200) {
        ElMessage.success('删除成功');
        multipleTableRef.value.initData();
      }
    });
  }
};
/**
 * @description: 字典数据初始化
 */
const resetDictData = (e) => {
  let list = e.map((item) => {
    return {
      label: item.dictName,
      value: item.dictValue,
    };
  });
  return list;
};
/**
 * @description: 获取字典数据
 */
const loginProtocolList = ref([]);
const componentIdentifyList = ref([]);
const deptListArr = ref([]);

const detectModeList = ref([]);
const portRangeList = ref([]);
const tcpPortList = ref([]);
const tcpPortScanType = ref([]);
const detectModeData = ref({});
const getDictList = () => {
  // 网络域
  getDictTypeList({ dictType: 'networkArea' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'networkAreaCode') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 数据来源
  getDictTypeList({ dictType: 'confirmSourceType' }).then((res) => {
    if (res.code == 200) {
      if (res.data) {
        tableColumn.forEach((item) => {
          if (item.prop == 'sourceType') {
            item.options = resetDictData(res.data);
          }
        });
      }
    }
  });
  // 资产状态
  getDictTypeList({ dictType: 'assetStatus' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'assetStatus') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 登录协议
  getDictTypeList({ dictType: 'loginProtocol' }).then((res) => {
    if (res.code == 200) {
      loginProtocolList.value = resetDictData(res.data);
    }
  });

  // 获取部门层级
  getLeftTreeJson().then((res) => {
    const { code, data } = res || {};
    if (code === 200) {
      someformColumns.value.forEach((item) => {
        if (item.key == 'deptId') {
          data.treeData &&
            data.treeData.forEach((child) => {
              child.value = child.id;
            });
          item.options = data.treeData || [];
        }
      });
      deptListArr.value = data.treeData || [];
    }
  });

  // 扫描模式
  getDictTypeList({ dictType: 'detectMode' }).then((res) => {
    if (res.code == 200) {
      detectModeList.value = resetDictData(res.data).map((item) => {
        item.value = Number(item.value);
        return item;
      });
    }
  });
  // 端口范围
  getDictTypeList({ dictType: 'portRange' }).then((res) => {
    if (res.code == 200) {
      portRangeList.value = resetDictData(res.data);
    }
  });
  // TCP端口扫描
  getDictTypeList({ dictType: 'portScanRange' }).then((res) => {
    if (res.code == 200) {
      tcpPortList.value = resetDictData(res.data);
    }
  });
  // tcp 端口扫描方式
  getDictTypeList({ dictType: 'tcpPortScanType' }).then((res) => {
    if (res.code == 200) {
      tcpPortScanType.value = resetDictData(res.data).map((item) => {
        item.value = Number(item.value);
        return item;
      });
    }
  });
  detectMode({}).then((res) => {
    detectModeData.value = res.data;
    getModeInfo();
  });
};
const getModeInfo = () => {
  let dataObj = detectModeData.value;
  let data;
  let modeConfig = formData.gatherConfig.remoteScan.modeConfig;
  if (modeConfig.mode == 0) {
    data = dataObj.quick;
  } else if (modeConfig.mode == 1) {
    data = dataObj.standard;
  } else if (modeConfig.mode == 2) {
    data = dataObj.slow;
  } else {
    data = {
      interval: 100,
      rate: 500,
      retry: 1,
      timeout: 1,
    };
  }
  modeConfig.interval = data.interval || 0;
  modeConfig.rate = data.rate || 0;
  modeConfig.retry = data.retry || 0;
  modeConfig.timeout = data.timeout || 0;
};
const tableDataPort = ref([]);
const columnPort = ref([
  { prop: 'port', label: '端口', width: '100px' },
  { prop: 'serve', label: '服务' },
]);
const assetCode = ref('');
const handlerPortDrawer = (data) => {
  drawerPropsPort.showDrawer = true;
  assetCode.value = data.item.assetCode;
  // getPortTable();
};
const tablePage = ref(1);
const tableSize = ref(20);

const getPortTable = (type) => {
  console.log(type)
  let _data = JSON.parse(JSON.stringify(type));
  let params = {
    hostCode: assetCode.value,
    ..._data
  };
  queryPorts(params).then((res) => {
    if (res.code == 200) {
      tableDataPort.value = res.data.records;
      res.data.records?.forEach((item, index) => {
        tableDataPort.value[index].serve = item.feature.serviceName;
      });
      drawerPropsPort.total = res.data.total;
    }
  });
};
const someformData = ref({});
const someformColumns = ref([
  {
    key: 'deptId',
    type: 'cascader',
    props: {
      checkStrictly: true,
      value: 'id',
      emitPath: false,
    },
    showAllLevels: false,
    label: '所属部门',
    col: 24,
    placeholder: '请选择所属部门',
    options: [],
    clearable: true,
  },
]);
const somerules = reactive<FormRules>({
  deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
});
const disabledMode = ref(true);
/**
 * @description 初始化disabled
 */
const resetDisabled = (e) => {
  disabledMode.value = e;
};
/**
 * @desciption 监听扫描模式
 */
const choseSelect = (e) => {
  console.log(Number(e));
  if (Number(e) != 3) {
    resetDisabled(true);
  } else {
    resetDisabled(false);
  }
  getModeInfo();
};
/**
 * @description 获取默认远程扫描模式
 */
const getScanModeInfo = async () => {
  let res = await getRemoteScan({});
  if (res.code == 200) {
    formData.gatherConfig.remoteScan = res.data;
  }
  drawerProps.showDrawer = true;
};
/**
 * @description: 端口策略列表
 */
const toPort = () => {
  router.push({
    path: '/system/systemConfig/portStrategy',
  });
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 清空选择的值
const clearSelect = () => {
  multipleTableRef.value.getTableMethods().clearSelection();
};
/**
 * @description 模板提交事件
 * @param eventName 事件名称 export: 批量导出
 * @param data 表单提交数据
 * @param cb  { Function } 组件回调  （ 新增，编辑，删除，上传需要参数: Boolean true(关闭loading,弹窗)/false(关闭loading) ）
 */
 const btnSubmit = (eventName, data, cb) => {
  switch (eventName) {
    case 'batchDelete':  // 批量删除
      autoBtn('allDel', data);
      break;
    case 'delete':
      autoBtn('del', data)
      break;
  }
}
</script>

<template>
  <div>
    <YaPageContent
      ref="multipleTableRef"
      :total="total"
      :tableData="tableData"
      :tableColumns="tableColumn"
      :buttons="leftButtons"
      :rightButtons="rightButtons"
      @sortChange="handleSortChange"
      @submit="btnSubmit"
      @init="getTableData"
      @tableBtnClick="tableBtnClick"
      @selectionChange="handleSelect"
    >
      <!-- 开放端口数 -->
      <template #port="item">
        <div
          class="colection-obj text-hover"
          v-if="item.item.feature.portNum"
          @click="handlerPortDrawer(item)"
        >
          {{ item.item.feature.portNum }}
        </div>
        <div v-else>-</div>
      </template>
      <!-- 资产来源 -->
      <template #sourceType="item">
        <div v-if="item.item.sourceTypeName">
          {{ item.item.sourceTypeName }}
          <span v-if="item.item.feature.sourceTaskName">-</span>
          {{ item.item.feature.sourceTaskName }}
        </div>
        <div v-else>-</div>
      </template>
      <!-- 资产状态 -->
      <template #assetStatus="item">
        <div class="survival" v-if="item.item.assetStatus == 'survive'">
          <img
            src="../../../assets/image/collection/survive.png"
            class="position-survive"
            alt=""
          />
          存活
        </div>
        <div class="offline" v-if="item.item.assetStatus == 'offLine'">
          <img
            src="../../../assets/image/collection/offLine.png"
            class="position-survive"
            alt=""
          />
          离线
        </div>
        <div class="abnormal" v-if="item.item.assetStatus == 'abnormal'">
          <img
            src="../../../assets/image/collection/abnormal.png"
            class="position-survive"
            alt=""
          />
          异常
        </div>
      </template>
    </YaPageContent>
    <YaDrawerTable v-if="drawerPropsPort.showDrawer" :drawerProps="drawerPropsPort" :column="columnPort" :data="tableDataPort" :showConfirm="false"  @btnClick="tableBtnClick" @init="getPortTable">
    </YaDrawerTable>
    <ya-drawer
      size="480px"
      :drawerProps="drawerProps"
      @handleEvent="handleDrawerEvent"
      destroy-on-close
      :before-close="handleCloseDrawer"
      :loading="isSubmitLoading"
    >
      <template #content>
        <el-form
          v-if="isAllStore"
          ref="dialogForm"
          :model="formData"
          :rules="rules"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="资产IP" prop="showIp">
            <el-input
              v-model="formData.showIp"
              disabled
              placeholder="请输入资产IP"
              clearable
            />
          </el-form-item>
          <el-form-item label="资产名称" prop="showIp">
            <el-input
              v-model="formData.name"
              placeholder="请输入资产名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="网络域" prop="networkAreaName">
            <el-input
              v-model="formData.networkAreaName"
              disabled
              placeholder="请输入网络域"
              clearable
            />
          </el-form-item>
          <el-form-item label="所属部门" prop="deptId">
            <el-cascader
              style="width: 100%"
              ref="cascader"
              placeholder="请选择部门"
              :props="{
                checkStrictly: true,
                value: 'id',
                emitPath: false,
              }"
              v-model="formData.deptId"
              :options="deptListArr"
              :show-all-levels="false"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="采集方式" prop="gatherTypeSet">
            <div class="login-content">
              <el-checkbox v-model="formData.gatherTypeSet" label="remote"
                >远程扫描</el-checkbox
              >
              <div v-if="formData.gatherTypeSet.includes('remote')">
                <div class="slot-flex">
                  <div class="gatherType-label">
                    扫描模式
                    <YaTooltip
                      placement="left"
                      trigger="hover"
                      content="扫描速度越慢，获取的端口开放信息也将会越准确，同时花费时间可能就会越长。"
                      :enterable="false"
                      :hide-after="0"
                    >
                      <svg
                        t="1660879085342"
                        class="icon QuestionFilled"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2208"
                        width="14"
                        height="14"
                      >
                        <path
                          d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                          p-id="2209"
                        ></path>
                        <path
                          d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                          p-id="2210"
                        ></path>
                      </svg>
                    </YaTooltip>
                  </div>
                  <div class="mb-16 flex-one m-l-25">
                    <el-select
                      v-model="formData.gatherConfig.remoteScan.modeConfig.mode"
                      placeholder="请选择"
                      @change="choseSelect"
                    >
                      <el-option
                        v-for="item in detectModeList"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="gather-label">
                  <el-form-item prop="gatherConfig.remoteScan.modeConfig.rate">
                    <div class="slot-flex">
                      <span slot="label" class="label-form">
                        发包速率
                        <YaTooltip
                          placement="left"
                          trigger="hover"
                          content="存活探测每秒的发包数，快速模式默认值为10000，标准模式为8000，慢速模式为5000，自定义范围500-200000。"
                          :enterable="false"
                          :hide-after="0"
                        >
                          <svg
                            t="1660879085342"
                            class="icon QuestionFilled"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2208"
                            width="14"
                            height="14"
                          >
                            <path
                              d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                              p-id="2209"
                            ></path>
                            <path
                              d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                              p-id="2210"
                            ></path>
                          </svg>
                        </YaTooltip>
                      </span>
                      <el-input
                      class="flex-one m-l-12"
                        @input="
                          formData.gatherConfig.remoteScan.modeConfig.rate =
                            formData.gatherConfig.remoteScan.modeConfig.rate.replace(
                              /^(0+)|[^\d]+/g,
                              ''
                            )
                        "
                        :disabled="disabledMode"
                        v-model="formData.gatherConfig.remoteScan.modeConfig.rate"
                        placeholder="请输入发包速率"
                        clearable
                      />
                    </div>
                  </el-form-item>
                </div>
                <div class="gather-label">
                  <el-form-item prop="gatherConfig.remoteScan.modeConfig.retry">
                    <div class="slot-flex">
                      <span slot="label" class="label-form">
                        重试次数
                        <YaTooltip
                          placement="left"
                          trigger="hover"
                          content="代表探测的过程中重新尝试的次数，快速模式默认值0，标准模式为2，慢速模式为3，自定义范围为0-8次。"
                          :enterable="false"
                          :hide-after="0"
                        >
                          <svg
                            t="1660879085342"
                            class="icon QuestionFilled"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2208"
                            width="14"
                            height="14"
                          >
                            <path
                              d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                              p-id="2209"
                            ></path>
                            <path
                              d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                              p-id="2210"
                            ></path>
                          </svg>
                        </YaTooltip>
                      </span>
                      <el-input
                      class="flex-one m-l-12"
                        v-model="
                          formData.gatherConfig.remoteScan.modeConfig.retry
                        "
                        @input="
                          formData.gatherConfig.remoteScan.modeConfig.retry =
                            formData.gatherConfig.remoteScan.modeConfig.retry.replace(
                              /[^\d]+/g,
                              ''
                            )
                        "
                        placeholder="请输入重试次数"
                        :disabled="disabledMode"
                        clearable
                      />
                    </div>
                  </el-form-item>
                </div>
                <div class="gather-label">
                  <el-form-item
                    prop="gatherConfig.remoteScan.modeConfig.interval"
                  >
                  <div class="slot-flex">
                    <span slot="label" class="label-form">
                      间隔时间
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="针对单个IP的发包间隔时间，单位为毫秒（ms），快速模式默认值为100毫秒，标准模式为300毫秒，慢速模式默认值为500毫秒，自定义范围为100-1000毫秒。"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </span>
                    <el-input
                    class="flex-one m-l-12"
                      v-model="
                        formData.gatherConfig.remoteScan.modeConfig.interval
                      "
                      @input="
                        formData.gatherConfig.remoteScan.modeConfig.interval =
                          formData.gatherConfig.remoteScan.modeConfig.interval.replace(
                            /^(0+)|[^\d]+/g,
                            ''
                          )
                      "
                      placeholder="请输入间隔时间"
                      :disabled="disabledMode"
                      clearable
                    />
                    </div>
                  </el-form-item>
                </div>
                <div class="gather-label">
                  <el-form-item
                    prop="gatherConfig.remoteScan.modeConfig.timeout"
                  >
                  <div class="slot-flex">
                    <span slot="label" class="label-form">
                      超时时间
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="代表响应的最大等待时间，单位为秒（s）,快速模式默认值为3秒，标准模式为4秒，慢速默认值为5秒，自定义范围为1-30秒。"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </span>
                    <el-input
                    class="flex-one m-l-12"
                      v-model="
                        formData.gatherConfig.remoteScan.modeConfig.timeout
                      "
                      @input="
                        formData.gatherConfig.remoteScan.modeConfig.timeout =
                          formData.gatherConfig.remoteScan.modeConfig.timeout.replace(
                            /^(0+)|[^\d]+/g,
                            ''
                          )
                      "
                      placeholder="请输入超时时间"
                      :disabled="disabledMode"
                      clearable
                    />
                    </div>
                  </el-form-item>
                </div>
                <!-- TCP端口扫描 -->
                <div class="gather-label">
                  <div class="label-form-item mb-5">TCP端口扫描</div>
                  <div
                    class="flex-st-x"
                    style="width: 100%"
                    v-for="item in tcpPortList"
                  >
                    <el-radio
                      v-model="
                        formData.gatherConfig.remoteScan.detectScanConfig
                          .tcpPortScanRange
                      "
                      :label="item.value"
                    >
                      <span>{{ item.label }}</span>
                    </el-radio>
                    <div
                      v-if="item.value == 'standard'"
                      class="port-list mt-8"
                      @click="toPort"
                    >
                      编辑端口服务列表
                      <YaTooltip
                        class="mt-8"
                        placement="left"
                        trigger="hover"
                        content="标准端口扫描测策略扫描目标的已知各种应用、木马等使用的端口。"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </div>
                    <div v-if="item.value == 'fast'" class="mt-8">
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="扫描1-1024"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </div>
                    <div
                      v-if="item.value == 'customize'"
                      class="m-l-8 port-range flex-one flex-st-x mt-8"
                    >
                      <el-input
                        v-model="
                          formData.gatherConfig.remoteScan.detectScanConfig
                            .tcpScanPort
                        "
                        placeholder="请输入1-65535"
                      ></el-input>
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="端口范围：1-65535；多个端口以英文“,”隔开；建议输入十个端口以内！"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled QuestionFilled1"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </div>
                  </div>
                </div>
                <!-- TCP端口扫描方式 -->
                <div class="level-top radio-block">
                  <div class="label-form mb-5">TCP端口扫描方式</div>
                  <el-radio-group
                    v-model="
                      formData.gatherConfig.remoteScan.detectScanConfig
                        .tcpPortScanType
                    "
                  >
                    <el-radio
                      v-for="item in tcpPortScanType"
                      :label="item.value"
                      class="mt-12"
                    >
                      <span class="tcp-radio">{{ item.label }}</span>
                      <span v-if="item.value == 0">
                        <YaTooltip
                          placement="left"
                          trigger="hover"
                          content="推荐选项，通过直接建立完整的TCP连接来判断端口开放情况，此方法快而准确！"
                          :enterable="false"
                          :hide-after="0"
                        >
                          <svg
                            t="1660879085342"
                            class="icon QuestionFilled"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2208"
                            width="14"
                            height="14"
                          >
                            <path
                              d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                              p-id="2209"
                            ></path>
                            <path
                              d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                              p-id="2210"
                            ></path>
                          </svg>
                        </YaTooltip>
                      </span>
                      <span v-if="item.value == 1">
                        <YaTooltip
                          placement="left"
                          trigger="hover"
                          content=" 向目标端口发送SYN包，依据对方是否回复ACK报文来判断端口开放情况。"
                          :enterable="false"
                          :hide-after="0"
                        >
                          <svg
                            t="1660879085342"
                            class="icon QuestionFilled"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2208"
                            width="14"
                            height="14"
                          >
                            <path
                              d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                              p-id="2209"
                            ></path>
                            <path
                              d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                              p-id="2210"
                            ></path>
                          </svg>
                        </YaTooltip>
                      </span>
                    </el-radio>
                  </el-radio-group>
                </div>
                <!-- UDP扫描端口 -->
                <div class="level-top">
                  <div class="label-form-item mb-5 scan-port-chose">
                    UDP扫描端口
                    <span>
                      <el-switch
                        class="scan-switch"
                        v-model="
                          formData.gatherConfig.remoteScan.detectScanConfig
                            .udpScanEnable
                        "
                    /></span>
                    <el-input
                      v-model="
                        formData.gatherConfig.remoteScan.detectScanConfig
                          .udpScanPort
                      "
                      placeholder="请输入1-65535"
                    >
                    </el-input>
                    <YaTooltip
                      placement="left"
                      trigger="hover"
                      content="端口范围：1-65535；多个端口以英文“,”隔开；建议输入十个端口以内！"
                      :enterable="false"
                      :hide-after="0"
                    >
                      <svg
                        t="1660879085342"
                        class="icon QuestionFilled QuestionFilled1"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2208"
                        width="14"
                        height="14"
                      >
                        <path
                          d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                          p-id="2209"
                        ></path>
                        <path
                          d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                          p-id="2210"
                        ></path>
                      </svg>
                    </YaTooltip>
                  </div>
                </div>
                <!-- 探活方式 -->
                <div class="level-top">
                  <div class="label-form-item">探活方式</div>
                  <el-checkbox
                    disabled
                    v-model="
                      formData.gatherConfig.remoteScan.detectSurviveConfig
                        .icmpPing
                    "
                    label="true"
                    >ICMP PING</el-checkbox
                  >
                  <div class="flex-bt mt-6">
                    <el-checkbox
                      v-model="
                        formData.gatherConfig.remoteScan.detectSurviveConfig
                          .udpPing
                      "
                      label="true"
                    >
                      UDP PING端口
                    </el-checkbox>
                    <div class="m-l-12 ping-port flex-one">
                      <el-input
                        v-model="
                          formData.gatherConfig.remoteScan.detectSurviveConfig
                            .udpPort
                        "
                        placeholder="请输入1-65535"
                      ></el-input>
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="向目标主机发送UDP数据报文，根据目标主机的反应以判断其是否存活。"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled QuestionFilled1"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </div>
                  </div>
                  <div class="flex-bt label-form-item mt-6">
                    <el-checkbox
                      v-model="
                        formData.gatherConfig.remoteScan.detectSurviveConfig
                          .tcpPing
                      "
                      label="true"
                      :disabled="
                        formData.gatherConfig.remoteScan.detectSurviveConfig
                          .tcpPingAllPort
                          ? true
                          : false
                      "
                    >
                      TCP PING端口
                    </el-checkbox>
                    <div class="m-l-16 ping-port flex-one">
                      <el-input
                        v-model="
                          formData.gatherConfig.remoteScan.detectSurviveConfig
                            .tcpPort
                        "
                        placeholder="请输入1-65535"
                      ></el-input>
                      <YaTooltip
                        placement="left"
                        trigger="hover"
                        content="向目标主机TCP SYN/ACK/FIN等数据报文，根据目标主机的反应以判断其是否存活。"
                        :enterable="false"
                        :hide-after="0"
                      >
                        <svg
                          t="1660879085342"
                          class="icon QuestionFilled QuestionFilled1"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2208"
                          width="14"
                          height="14"
                        >
                          <path
                            d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                            p-id="2209"
                          ></path>
                          <path
                            d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                            p-id="2210"
                          ></path>
                        </svg>
                      </YaTooltip>
                    </div>
                  </div>
                  <el-checkbox
                    class="mt-6"
                    v-model="
                      formData.gatherConfig.remoteScan.detectSurviveConfig
                        .tcpPingAllPort
                    "
                    :disabled="
                      formData.gatherConfig.remoteScan.detectSurviveConfig
                        .tcpPing
                        ? true
                        : false
                    "
                    label="true"
                    >TCP PING全端口</el-checkbox
                  >
                </div>
              </div>
            </div>
            <div class="login-content">
              <el-checkbox v-model="formData.gatherTypeSet" label="login"
                >登录采集</el-checkbox
              >
              <div
                class="login-content-center"
                v-if="formData.gatherTypeSet.includes('login')"
              >
                <el-form-item
                  label="登录协议"
                  prop="gatherConfig.loginGather.protocol"
                  class="new-form-item-input"
                >
                  <el-select
                    v-model="formData.gatherConfig.loginGather.protocol"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in loginProtocolList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="登录端口"
                  prop="gatherConfig.loginGather.port"
                  class="new-form-item-input"
                >
                  <el-input
                    v-model="formData.gatherConfig.loginGather.port"
                    placeholder="请输入登录端口"
                    clearable
                  />
                </el-form-item>
                <el-form-item
                  label="登录账户"
                  prop="gatherConfig.loginGather.account"
                  class="new-form-item-input"
                >
                  <el-input
                    v-model="formData.gatherConfig.loginGather.account"
                    placeholder="请输入登录账户"
                    clearable
                  />
                </el-form-item>
                <el-form-item
                  label="登录密码"
                  prop="gatherConfig.loginGather.pwd"
                  class="new-form-item-input"
                >
                  <el-input
                    show-password
                    type="password"
                    autocomplete="new-password"
                    v-model="formData.gatherConfig.loginGather.pwd"
                    placeholder="请输入登录密码"
                    clearable
                  />
                </el-form-item>
              </div>
              <!-- <div>
                <el-checkbox disabled
                  >Agent采集
                  <el-tooltip
                    effect="dark"
                    content="该主机没有安装Agent插件"
                    placement="top"
                  >
                    <span
                      ><el-icon :size="12" class="icon"><InfoFilled /></el-icon
                    ></span>
                  </el-tooltip>
                </el-checkbox>
              </div> -->
            </div>
          </el-form-item>
        </el-form>
        <ya-form
          v-else
          label-position="left"
          @handleEvent="handleDrawerEvent"
          :formColumns="someformColumns"
          labelWidth="100px"
          :formData="someformData"
          :rules="somerules"
          :ref="
            (el) => {
              if (el) somedialogForm = el;
            }
          "
        >
        </ya-form>
        <div></div>
      </template>
    </ya-drawer>
  </div>
</template>

<style scoped lang="scss">
@import '../../../style/popUp.scss';
.survival {
  color: var(--el-color-success);
}
.offline {
  color: var(--el-color-info);
}
.abnormal {
  color: #f99c6a;
}
.position-survive {
  position: relative;
  top: 5px;
}
.colection-obj {
  color: var(--el-color-primary);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
}

.colection-obj:hover {
  cursor: pointer;
}

.collection-type {
  width: 100%;
}
::v-deep .el-radio {
  margin-bottom: 8px;
  margin-right: 10px;
}
.login-content {
  width: 100%;
  .login-content-center {
    background: var(--el-bg-color);
    border-radius: 4px;
    padding: 15px;
  }
  .new-form-item-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
    ::v-deep .el-form-item__label {
      margin-bottom: 0 !important;
    }
  }
  .login-content-center .new-form-item-input:last-child {
    margin-bottom: 0;
  }
}
.gatherType-label {
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-primary);
}

.gather-label {
  ::v-deep .el-form-item__content {
    display: block !important;
    margin-bottom: 12px;
  }
}
.slot-flex {
  display: flex;
  .m-l-12 {
    margin-left: 12px;
  }
  .m-l-25 {
    margin-left: 25px;
  }
}
.label-form,
.label-form-item {
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-primary);
  font-weight: 400;
}
.label-form::before {
  content: '*';
  color: var(--el-color-danger);
  margin-right: 4px;
}
.QuestionFilled {
  position: relative;
  top: 2px;
  fill: rgba(0, 0, 0, 0.8);
}
.mb-16 {
  margin-bottom: 12px;
}
.radio-block {
  ::v-deep .el-radio {
    margin-right: 130px;
  }
}
.tcp-radio {
  margin-right: 10px;
}
.mt-12 {
  margin-bottom: 12px;
}
.mb-5 {
  margin-bottom: 5px;
}
.scan-port-chose {
  display: flex;
  align-items: center;
  .scan-switch {
    margin: 0 5px;
  }
}
.QuestionFilled1 {
  margin-left: 10px;
}
.flex-bt {
  display: flex;
  justify-content: space-between;
  ::v-deep .el-checkbox__label {
    width: 112px;
  }
}
.ping-port {
  display: flex;
  ::v-deep .el-input {
    width: 91%;
  }
}
.flex-one {
  flex: 1;
}
.mt-6 {
  margin-top: 8px;
}
.flex-st-x {
  display: flex;
  align-items: center;
}
.port-list {
  color: var(--el-color-primary);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.mt-8 {
  margin-bottom: 8px;
}
::v-deep .el-form >.el-form-item {
  margin-bottom: 16px;
}
</style>
